<template>
  <a-card :bordered="false" class="index-box">
    <div>
      <!-- 计划进行状态 -->
      <div style="display:flex;justify-content:space-between;width:100%">
        <a-card class="card-box green" style="padding-left:20px;">
          <div>
            <div style="font-size:16px">进行中</div>
            <div style="font-size:38px;font-weight:bold;margin:5px 0;font-family: Arial;">
              {{cardData.unFinished}}
            </div>
          </div>
        </a-card>
        <a-card class="card-box orange" style="padding-left:20px;">
          <div>
            <div style="font-size:16px">已超期任务</div>
            <div style="font-size:38px;font-weight:bold;margin:5px 0;font-family: Arial;">
              {{cardData.overTime}}
            </div>
          </div>
        </a-card>
        <a-card class="card-box violet" style="padding-left:20px;">
          <div>
            <div style="font-size:16px">已完成任务</div>
            <div style="font-size:38px;font-weight:bold;margin:5px 0;font-family: Arial;">
              {{cardData.finished}}
            </div>
          </div>
        </a-card>
        <a-card class="card-box black" style="padding-left:20px;">
          <div>
            <div style="font-size:16px">全部任务</div>
            <div style="font-size:38px;font-weight:bold;margin:5px 0;font-family: Arial;">{{cardData.total}}</div>
          </div>
        </a-card>
        <a-card class="card-box gray" style="padding-left:20px;">
          <div>
            <div style="font-size:16px">我处理的任务</div>
            <div style="font-size:38px;font-weight:bold;margin:5px 0;font-family: Arial;">{{cardData.involved}}
            </div>
          </div>
        </a-card>

      </div>
    </div>
    <!-- 环比图 -->
    <div style="margin-top:15px" class="chart-box">
      <p style="font-size:26px;color:#333;margin-left:20px;padding:20px 20px 0 20px">环比图</p>
      <div style="background-color: #fff;border-radius: 5px;text-align: center;padding:20px">
        <pie :dataSource="pieData" :height="300"></pie>
      </div>
    </div>
    <!-- 所有任务 -->
    <a-card title="所有任务" style="margin-top: 10px">
      <a-spin :spinning="loading">
      <a-empty v-if="!loading&&dataSource.length===0"></a-empty>
      <div class="item" v-for="(item) in dataSource" :key="item.id">
        <div class="item-title">{{item.taskName}}</div>
        <div class="item-content">
          <img class="item-icon" :src="item.banner||defaultImg">
          <div style="flex:1">
            <div class="item-content-title">{{item.taskName}}</div>
            <a-row>
              <a-col class="item-flex" :span="8">
                <div class="item-label">任务类型</div>
                <div class="item-value">{{item.taskType==0?'文章':'活动'}}</div>
              </a-col>
              <a-col class="item-flex" :span="12">
                <div class="item-label">任务编码</div>
                <div class="item-value">{{item.taskNo}}</div>
              </a-col>
            </a-row>
            <a-row>
              <a-col class="item-flex" :span="8">
                <div class="item-label">作 者</div>
                <div class="item-value">{{item.createBy}}</div>
              </a-col>
              <a-col class="item-flex" :span="12">
                <div class="item-label">创建时间</div>
                <div class="item-value">{{item.createTime}}</div>
              </a-col>
            </a-row>
            <a-row>
              <a-col v-if="item.upateTime" class="item-flex" :span="8">
                <div class="item-label">更新时间</div>
                <div class="item-value">{{item.upateTime}}</div>
              </a-col>
              <a-col class="item-flex" :span="8">
                <div class="item-label">任务截止时间</div>
                <div class="item-value">{{item.endTime||'无截止时间'}}</div>
              </a-col>
            </a-row>
            <div>
              <span @click="handleTask(item)" class="item-button">
                查看
                <a-icon type="eye" theme="twoTone"/>
              </span>
            </div>
          </div>
        </div>
      </div>
      <a-pagination @change="loadData" style="text-align: right" v-model="ipagination.current"
                    :total="ipagination.total"
                    show-less-items/>
    </a-spin>
    </a-card>
  </a-card>
</template>

<script>
  import {getAction} from '@/api/manage'
  import Pie from "@/components/chart/Pie";
  import {JeecgListMixin} from '@/mixins/JeecgListMixin';

  export default {
    name: 'TaskStatistics',
    components: {Pie},
    mixins: [JeecgListMixin],
    data() {
      return {
        cardData: [],
        pieData: [],
        columns: [],
        url: {
          list: 'task/taskInfo/queryAllTaskList'
        },
        defaultImg: require('@assets/default.png'),
      }
    },
    mounted() {
      this.getCardData();
    },
    methods: {
      getCardData() {
        getAction('task/statics/indexData', {
          startTaskTime: this.startTaskTime,
          endTaskTime: this.endTaskTime
        }).then(res => {
          if (res.success) {
            this.cardData = res.result;
            this.pieData = [
              {
                item: '进行中', count: res.result.unFinished
              },
              {
                item: '已完成', count: res.result.finished
              },
              {
                item: '已超期', count: res.result.overTime
              }
            ]
          }
        })
      },
      toPage(listType) {
        this.$router.push({
          name: 'taskList',
          query: {
            listType: listType
          }
        })
      },
      //处理任务
      handleTask(item) {
        this.$router.push({
          path: '/task/flow',
          query: {
            taskNo: item.taskNo,
            childNodeId: item.child,
            taskType: item.taskType,
            isHistory: '2'
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  @import '~@assets/less/index.less';

  .a {
    display: inline-block;
    font-weight: normal;
    justify-content: space-around;
  }

  .color {
    color: blue;
  }

  .index-box.ant-card {
    background-color: #EFF2F5 !important;
  }

  .card-box {
    width: 18%;
    height: 140px;
    background-color: #EFF2F5 !important;
    border: none !important;
    background-size: 100% 100%;
    color: #fff;
    cursor: pointer;
  }

  .card-box.green {
    background-image: url("~@assets/green-bg.png");
  }

  .card-box.black {
    background-image: url("~@assets/black-bg.png");
  }

  .card-box.orange {
    background-image: url("~@assets/orange-bg.png");
  }

  .card-box.violet {
    background-image: url("~@assets/violet-bg.png");
  }

  .card-box.gray {
    background-image: url("~@assets/gray-bg.png");
  }

  .chart-box {
    background-color: #E5E9EF;
    border-radius: 5px;
  }

  .timeBox {
    width: 120px;
    height: 40px;
    border: 1px solid #46ADF7;
    line-height: 40px;
    font-size: 20px;
    color: #3399FF;
    margin-bottom: 20px;
  }

  .timeBox:first-child {
    border-radius: 40px 0 0 40px;
  }

  .timeBox:last-child {
    border-radius: 0 40px 40px 0;
  }

  .timeBox.color {
    background-color: #2F7DF7;
    color: #fff;
  }

  .item {
    background-color: white;
    border-radius: 8px;
    padding: 20px 30px;
    margin: 10px 0;

    &-title {
      font-weight: 700;
      color: #333;
      font-size: 16px;
    }

    &-content {
      display: flex;
      font-size: 13px;
      align-items: center;

      &-title {
        font-size: 15px;
        line-height: 25px;
      }
    }

    &-content .ant-row {
      margin: 8px 0;
    }

    &-icon {
      width: 180px;
      height: 120px;
      border-radius: 5px;
      border: 1px solid #ededed;
      margin-right: 30px;
    }

    &-flex {
      display: flex;
    }

    &-label {
      width: 90px;
      color: #999;
    }

    &-value {
      flex: auto;
      color: #333;
    }

    &-button {
      background-color: #eaeffa;
      border-radius: 6px;
      line-height: 30px;
      color: #06f;
      text-align: center;
      margin-top: 3px;
      cursor: pointer;
      padding: 8px 10px;
    }
  }
</style>